<template>
	<u-list :height="screenHeight">
		<view>
			<!-- 顶部核酸检测 -->
			<view class="NAT-top">
				<view class="nat-title">
					<image class="nat-img" src="../../../static/logo.png" mode=""></image>
					<view class="nat-box">
						<view class="nat-lable">标准---核酸检测</view>
						<view class="nat-price">￥20</view>
					</view>
				</view>
				<view class="nat-tag">
					<view class="nat-tag-box">
						<u-icon name="checkmark-circle-fill" color="#2979ff" size="20"></u-icon>
						支持改退
					</view>
					<view class="nat-tag-box">
						<u-icon name="checkmark-circle-fill" color="#2979ff" size="20"></u-icon>
						可开发票
					</view>
					<view class="nat-tag-box">
						<u-icon name="checkmark-circle-fill" color="#2979ff" size="20"></u-icon>
						送健康分
					</view>
				</view>
			</view>
			<!-- 地址详情 -->
			<view class="hospital-box">
				<view class="hos-address">
					<text>河南省第一医院</text>
					<text class="address">黄河大道峨眉大街</text>
				</view>
				<view class="hos-phone" @click="goPhone">
					<u-icon name="phone-fill" color="#2979ff" size="28"></u-icon>
					<text class="">电话</text>
				</view>
			</view>
			<!-- 表单提交 -->
			<view class="NAT-form">
				<u-form labelPosition="left" ref="form" :rules="rules" :model="NATForm">
					<u-form-item label="姓名:" borderBottom prop="userInfo.name">
						<u--input placeholder="请输入姓名" border="none" v-model="NATForm.userInfo.name"></u--input>
					</u-form-item>
					<u-form-item label="身份证:" labelWidth="60" borderBottom prop="userInfo.userId" ref="item1">
						<u--input placeholder="请输入身份证" border="none" v-model="NATForm.userInfo.userId"></u--input>
					</u-form-item>
					<u-form-item label="手机号:" labelWidth="60" borderBottom prop="userInfo.phone">
						<u--input placeholder="请输入手机号" border="none" v-model="NATForm.userInfo.phone"></u--input>
					</u-form-item>
				</u-form>
			</view>
			<!-- 预约时段 -->
			<view class="week-box">
				<view class="title">预约时段</view>
				<u-scroll-list>
					<view class="week-view">
						<view class="week-item">
							<text>周一</text>
							<text>10-30</text>
						</view>
						<view class="week-item">
							<text>周二</text>
							<text>10-30</text>
						</view>
						<view class="week-item">
							<text>周三</text>
							<text>10-30</text>
						</view>
						<view class="week-item">
							<text>周四</text>
							<text>10-30</text>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- 采集方法 -->
			<view class="collect-methods">
				<view class="title">
					<text>检测方法</text>
				</view>
				<text>目前主流方法主要是咽拭子采集，操作简单，方便快捷，刺激性相对较小......</text>
			</view>

			<!-- 底部按钮 -->
			<view class="sub-box">
				<view class="sum">检测费用 : 10</view>
				<view><u-button type="primary" text="提交" @click="submitData"></u-button></view>
			</view>
		</view>
	</u-list>
</template>

<script>
export default {
	data() {
		return {
			// 页面高度
			screenHeight: 0,
			// 表单的值
			NATForm: {
				userInfo: {
					name: '',
					userId: '',
					phone: ''
				}
			},
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.userId': {
					type: 'string',
					min: 18,
					max: 18,
					required: true,
					message: '请填写正确的身份证号码',
					trigger: ['blur', 'change']
				},
				'userInfo.phone': {
					type: 'string',
					min: 11,
					max: 11,
					required: true,
					message: '请填写正确的手机号码',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	methods: {
		// 拨打电话
		goPhone() {
			uni.makePhoneCall({
				phoneNumber: '18530627952'
			});
		},
		// 提交表单数据
		submitData() {
			this.$refs.form
				.validate()
				.then(res => {
					uni.$u.toast('校验通过');
				})
				.catch(errors => {
					uni.$u.toast('校验失败');
				});
		}
	},
	mounted() {
		//获取页面高度
		this.screenHeight = uni.getSystemInfoSync().windowHeight - 50; //获取当前页面的高度
	}
};
</script>

<style lang="less">
page {
	background-color: #fafafa;
}
// 顶部核酸检测
.NAT-top {
	background-color: #ffffff;
	.nat-title {
		display: flex;
		padding: 0 14rpx;
		.nat-img {
			width: 130rpx;
			height: 130rpx;
		}
		.nat-box {
			margin-left: 10rpx;
			display: flex;
			justify-content: space-around;
			flex-direction: column;
			.nat-lable {
				font-size: 34rpx;
				font-weight: 500;
			}
			.nat-price {
				color: #c88d70;
			}
		}
	}
	.nat-tag {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 14rpx;
		.nat-tag-box {
			display: flex;
		}
	}
}
// 医院地址详情
.hospital-box {
	background-color: #ffffff;
	margin-top: 20rpx;
	padding: 10rpx 20rpx;
	display: flex;
	justify-content: space-between;
	.hos-address {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.address {
			margin: 20rpx 0;
			font-size: 26rpx;
		}
	}
	.hos-phone {
		width: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
}
// 表单
.NAT-form {
	background-color: #ffffff;
	padding: 10rpx;
	margin: 20rpx 0;
	.u-form-item {
		margin: 14rpx 0;
	}
}
// 预约时段
.week-box {
	.title {
		margin: 15rpx;
	}
	border-radius: 10rpx;
	background-color: #ffffff;
	height: 230rpx;
	margin-top: 16rpx;
	padding: 10rpx;
	.week-view {
		display: flex;
		.week-item {
			margin-right: 10rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			width: 170rpx;
			height: 120rpx;
			background-color: #e6e6e6;
		}
	}
}
.sub-box{
	 background-color: #ffffff;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  border-top: 1rpx #f5f5f5 solid;
	  padding: 0 26rpx;
	  height: 100rpx;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  .sum{
		  color: #ea7843;
	  }
	  .u-button{
			height: 60rpx !important;
	  }
}
// 采集方法
.collect-methods{
	margin: 20rpx 0;
	height: 150rpx;
	background-color: #ffffff;
	padding: 20rpx;
	.title{
		color: #ffffff;
		background-color: #3c9cff;
		width: 150rpx;
		height: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		margin: 14rpx 0;
	}
}
</style>
